import React from 'react';
import Reflux from 'reflux';
import * as ReactMixin from "react-mixin";
import {
  List, Steps, WhiteSpace, WingBlank, Tabs, Card, Grid, ActionSheet, NavBar, Modal, Picker,
  TextareaItem
} from "antd-mobile";
import {Link} from "react-keeper";
require('./YwhOrg.less');

const { API_URL} = require(`./../../../../config/${ENV}.json`);
import NoPhoto from '../../../../assets/icon/vote/ywh/nophoto.png';

import Store from './Store';
import Actions from './Actions';

import {RECORD} from "../../toupiao/const/Const";

const Item = List.Item;
const Brief = Item.Brief;
const Step = Steps.Step;

const tabs = [
  { title: <div>选举状态</div> },
  { title: <div>选举结果</div> },
  { title: <div>组织结构</div> }
];

class YwhOrg extends React.Component{
  constructor(props) {
    super(props);
    this.onTabsChange = this.onTabsChange.bind(this);
    this.onModalClose = this.onModalClose.bind(this);
    this.showModal = this.showModal.bind(this);
    this.onWrapTouchStart = this.onWrapTouchStart.bind(this);
  }

  componentWillMount() {
    Actions.onInit(this.props.params.cid);
  }

  onTabsChange(index) {
    Actions.onTabsChange(index);
  }

  showModal(e, p) {
    e.preventDefault(); // 修复 Android 上点击穿透
    Actions.showModal(p);
  }

  onModalClose() {
    Actions.onModalClose();
  }

  onWrapTouchStart(e) {
    // fix touch to scroll background page on iOS
    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
      return;
    }
    const pNode = closest(e.target, '.am-modal-content');
    if (!pNode) {
      e.preventDefault();
    }
  }

  render() {

    return (
      <div>
        <NavBar
          mode="dark">
          {this.state.org.court.name}业委会
        </NavBar>
        <WhiteSpace />
        <div>
          <List.Item>
            名称：{this.state.org.court.name}
          </List.Item>
          <List.Item>
            地址：{this.state.org.court.address}
          </List.Item>
        </div>
        <WhiteSpace />
        <Tabs tabs={tabs}
              initialPage={0}
              onChange={(tab, index) => { this.onTabsChange(index); }}
        >
          <div>
            <List>
              <WingBlank>
                <Item>
                  {
                    this.state.org.rwStatus.length > 0 ?
                      <Steps current={
                        this.state.org.rwStatus.findIndex(rw => {return !!rw.active})
                      }>
                        {
                          this.state.org.rwStatus.map(rw => {
                            return (
                              <Step
                                status={rw.over ? 'finish' : (rw.active ? 'process' : 'wait')}
                                title={
                                  rw.name
                                }
                                description={
                                  rw.over ? ('结束时间：' + rw.endTime) : (rw.active ? ('开始时间：' + rw.startTime) : '待进行')
                                }
                              />
                            );
                          })
                        }
                      </Steps>
                      :
                      '无任务'
                  }
                </Item>
              </WingBlank>
            </List>
          </div>
          <div>
            <List renderHeader={'单元长'}>
              {
                this.state.org.voteResult.dyz.length > 0 ?
                  this.state.org.voteResult.dyz.map(m => {
                    return (
                      <Item
                        onClick={(e)=> {this.showModal(e, m)}}
                        arrow="horizontal"
                        extra={
                          <div>{m.isLoading ? 'Loading...' : (m.building+'栋'+m.unit+'单元')}</div>
                        }>
                        {m.proprietorName}
                        <Brief>
                          门牌号：{m.isLoading ? 'Loading...' : m.doorplateNo}
                        </Brief>
                      </Item>
                    );
                  })
                  :
                  <Item>无数据</Item>
              }
            </List>
            <List renderHeader={'楼栋长'}>
              {
                this.state.org.voteResult.ldz.length > 0 ?
                  this.state.org.voteResult.ldz.map(m => {
                    return (
                      <Item
                        onClick={(e)=> {this.showModal(e, m)}}
                        arrow="horizontal"
                        extra={
                          <div>{m.building+'栋'}</div>
                        }>
                        {m.proprietorName}
                        <Brief>
                          门牌号：{m.doorplateNo}
                        </Brief>
                      </Item>
                    );
                  })
                  :
                  <Item>无数据</Item>
              }
            </List>
            <List renderHeader={'委员'}>
              {
                this.state.org.voteResult.wy.length > 0 ?
                  this.state.org.voteResult.wy.map(m => {
                    return (
                      <Item
                        onClick={(e)=> {this.showModal(e, m)}}
                        arrow="horizontal">
                        {m.proprietorName}
                        <Brief>
                          门牌号：{m.doorplateNo}
                        </Brief>
                      </Item>
                    );
                  })
                  :
                  <Item>暂无</Item>
              }
            </List>
            <List renderHeader={'主任'}>
              {
                this.state.org.voteResult.zr.length > 0 ?
                  this.state.org.voteResult.zr.map(m => {
                    return (
                      <Item
                        onClick={(e)=> {this.showModal(e, m)}}
                        arrow="horizontal">
                        {m.proprietorName}
                        <Brief>
                          门牌号：{m.doorplateNo}
                        </Brief>
                      </Item>
                    );
                  })
                  :
                  <Item>暂无</Item>
              }
            </List>
          </div>
          <div>
            <List renderHeader={() => '主任'}>
              {
                this.state.org.zr.hasOwnProperty('p') ?
                  <Card>
                    <Card.Header
                      title={this.state.org.zr.p.name}
                      thumb={(API_URL + this.state.org.zr.p.imageUrl)}
                      thumbStyle={{width: '64px', height: '64px'}}
                      extra={<span>主任</span>}
                    />
                    <Card.Body>
                      <div style={{minHeight: '48px'}}>{this.state.org.zr.p.synopsis}</div>
                    </Card.Body>
                    <Card.Footer
                      content={
                        <div style={{color: 'blue'}}>
                          {'Tel: ' + this.state.org.zr.p.phone}
                        </div>}
                    />
                  </Card>
                  :
                  <Card>
                    <Card.Header
                      title={'待定'}
                      thumb={NoPhoto}
                      thumbStyle={{width: '64px', height: '64px'}}
                      extra={<span>主任</span>}
                    />
                    <Card.Body>
                      <div style={{minHeight: '48px'}}>无</div>
                    </Card.Body>
                    <Card.Footer
                      content={
                        <div style={{color: 'blue'}}>
                          {'Tel: ___________'}
                        </div>}
                    />
                  </Card>
              }
            </List>
            <List renderHeader={() => '委员'}>
              {
                this.state.org.nominations && this.state.org.nominations.length > 0 ?
                  <Grid
                    data={this.state.org.nominations}
                    columnNum={3}
                    renderItem={dataItem => (
                      <Link to={`/home/ywh/member/${this.props.params.cid}/${dataItem.proprietorId}`}>
                        <div style={{ padding: '5px' }}>
                          <img src={dataItem.icon} style={{ width: '64px', height: '64px' }} alt="" />
                          <div style={{ color: '#888', fontSize: '16px'}}>
                            <span>{dataItem.text}</span>
                            <br/>
                            <span style={{marginTop: '5px', fontSize: '12px'}}>职务：{dataItem.job}</span>
                          </div>
                        </div>
                      </Link>
                    )}
                  />
                  :
                  <List.Item>
                    待定
                  </List.Item>
              }
            </List>
          </div>
        </Tabs>
        <Modal
          visible={this.state.org.modal.visible}
          transparent
          maskClosable={false}
          onClose={() => this.onModalClose()}
          title="个人详情"
          footer={[{text: '关闭', onPress: () => {this.onModalClose();}}]}
          wrapProps={{ onTouchStart: this.onWrapTouchStart }}
        >
          <div style={{ height: 200, overflow: 'scroll', fontSize: '12px' }}>
            <List>
              <Item extra={this.state.org.modal.data.proprietorName}>姓名</Item>
              <Picker
                title="选择学历"
                cols="1"
                disabled={true}
                value={[this.state.org.modal.data.hasOwnProperty('record') ? this.state.org.modal.data.record : '']}
                data={RECORD}>
                <Item>学历</Item>
              </Picker>
              <TextareaItem
                title="简介"
                value={this.state.org.modal.data.hasOwnProperty('synopsis') ? this.state.org.modal.data.synopsis : null}
                placeholder="这家伙很懒，什么都没留下。"
                count="140"
                rows="4"
                editable={false}
              />
              <Item>
                <img
                  style={{height: '100%', width: '100%'}}
                  src={this.state.org.modal.data.hasOwnProperty('imageUrl') ? (API_URL + this.state.org.modal.data.imageUrl) : NoPhoto} />
              </Item>
            </List>
          </div>
        </Modal>
      </div>
    );
  }
}

ReactMixin.onClass(YwhOrg, Reflux.connect(Store, 'org'));

export default YwhOrg;

function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    }
    el = el.parentElement;
  }
  return null;
}
